<!doctype html>
<html lang="zh">

	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>jQuery响应式自适应图片瀑布流代码</title>
		<style type="text/css">
			body {
				text-align: center;
			}
			.photo {
				position: relative;
				
			}
			
			.photos {
				margin: auto;
				font-size: 0px;
			}
		</style>
	</head>

	<body>
		
			<div class="photos">
				<div class="photo">
					<img src="../../阿萨姆/img/11.jpg">
					
				</div>
				<div class="photo">
					<img src="../../阿萨姆/img/image_png_00002.png">
					
				</div>
				<div class="photo">
					<img src="../../阿萨姆/img/999.jpg">
					
				</div>

			</div>
	

		<script src="../../阿萨姆/js/jquery-1.12.4.min.js"></script>
		<script>
			! function(e) {
				function i(i, r) {
					r.jsSetup && t(i, r.margin), i.addClass("xgallerify"), m ? n(i, r) : e(window).on("load", function() {
						n(i, r)
					}), e(window).resize(function() {
						n(i, r)
					})
				}

				function t(i, t) {
					jChildren = e(i.children()), jChildren.css("display", "inline-block").css("margin", t).find("img").css("width", "100%").addClass("ximage-loaded")
				}

				function n(i, t) {
					var n = [],
						a = [],
						s = i.children(),
						d = t.width || i.width(),
						m = h(d, t.mode);
					imagesPerRow = t.imagesPerRow || m.itemsPerRow;
					var g;
					t.width && i.width(d);
					for(var u = 0; u < s.length; u++) {
						var w = e(s[u]);
						w.width() && (n.push(w), (n.length >= imagesPerRow || u == s.length - 1) && (a.push(n), u == s.length - 1 && n.length < m.itemsPerRow && "fullwidth" != t.lastRow ? o(a[a.length - 1], d, t.margin, g) : g = r(a[a.length - 1], d, t.margin, m.maxHeight), g < m.maxHeight && (n = [])))
					}
				}

				function r(e, i, t, n) {
					return a(e, n), s(e, i, t)
				}

				function o(i, t, n, r) {
					r = a(i, r);
					var o = 0;
					return e(i).each(function() {
						o += e(this).width()
					}), o > t && (r = s(i, t, n)), r
				}

				function a(e, i) {
					for(var t = 0; t < e.length; t++) {
						var n = i / e[t].height();
						e[t].width();
						e[t].width(e[t].width() * n)
					}
					return e[0].height()
				}

				function s(i, t, n) {
					var r = 0;
					e(i).each(function() {
						r += e(this).width()
					});
					for(var o = (t - i.length * (n + 4) * 2) / r, a = 0; a < i.length; a++) i[a].css("width", i[a].width() * o);
					return i[0].height()
				}

				function h(e, i) {
					var t = {
						itemsPerRow: void 0,
						maxHeight: void 0
					};
					return 768 >= e && (t.maxHeight = screen.height), "bootstrap" == i ? (e > 1200 ? t.itemsPerRow = 4 : e > 992 ? t.itemsPerRow = 3 : e > 768 ? t.itemsPerRow = 2 : t.itemsPerRow = .4, e > 768 && (t.maxHeight = .5 * screen.height)) : "flickr" == i ? (e > 1800 ? t.itemsPerRow = 4 : e > 1300 ? t.itemsPerRow = 3 : e > 610 ? t.itemsPerRow = 2 : t.itemsPerRow = 1, e > 768 && (t.maxHeight = .4 * screen.height)) : "small" == i ? (e > 1800 ? t.itemsPerRow = 14 : e > 1300 ? t.itemsPerRow = 10 : e > 610 ? t.itemsPerRow = 6 : t.itemsPerRow = 4, e > 768 && (t.maxHeight = .4 * screen.height)) : (e > 1800 ? t.itemsPerRow = 4 : e > 1200 ? t.itemsPerRow = 3 : e > 768 ? t.itemsPerRow = 2 : t.itemsPerRow = 1, e > 768 && (t.maxHeight = .5 * screen.height)), t
				}

				function d(e, i, t) {
					var n;
					return function() {
						var r = this,
							o = arguments,
							a = function() {
								n = null, t || e.apply(r, o)
							},
							s = t && !n;
						clearTimeout(n), n = setTimeout(a, i), s && e.apply(r, o)
					}
				}
				var m = !1;
				e(window).load(function() {
					m = !0
				}), e.fn.gallerify = function(e) {
					var r = this;
					e = e || {}, e.margin = void 0 != e.margin && null != e.margin ? e.margin : 10, e.width = e.width || void 0, e.mode = e.mode || "default", e.jsSetup = void 0 != e.jsSetup ? e.jsSetup : !0, e.imagesPerRow = e.imagesPerRow || void 0, e.debounceLoad = void 0 != e.debounceLoad ? e.debounceLoad : !0, e.lastRow = e.lastRow || "adjust", i(r, e), this.gallerify.render = function() {
						t(r, e.margin), n(r, e)
					};
					var o = d(function() {
						n(r, e)
					}, 100);
					return this.gallerify.renderAsyncImages = function() {
						t(r, e.margin), e.debounceLoad ? r.find("img").load(function() {
							o()
						}) : r.find("img").load(function() {
							n(r, e)
						})
					}, r
				}
			}(jQuery);
		</script>
		<script type="text/javascript">
			var gallery = $('.photos').gallerify({
				margin: 10,
				mode: 'default',
				lastRow: 'adjust'
			});
		</script>

	</body>

</html>